<template>
    <div>
        <div class="section">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>热门推荐词汇分析</span>
                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                <el-row gutter="10">
                    <el-col :span="12">
                        <div class="reccharts">
                            <PieEChart></PieEChart>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="reccharts">
                            <LineEChart></LineEChart>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </div>

        <div class="section">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>热门推荐内容分析</span>
                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                <Table></Table>
            </el-card>
        </div>
    </div>
</template>

<script>
import PieEChart from "../components/PieEChart";
import LineEChart from "../components/LineEChart";
import Table from "../components/Table";

export default {
    name: "RecSys",
    components: {
        PieEChart: PieEChart,
        LineEChart: LineEChart,
        Table: Table
    }
};
</script>

<style scoped>
.section {
    padding: 10px 10px 10px 10px;
}

.reccharts {
    height: 400px;
    width: 100%;
}
</style>